Welcome to BotSailor Help! Just use the email OTP to sign in and track your tickets. Password login isn’t needed anymore.
Adding a Telegram Chat Widget to your website lets visitors connect with you instantly through one of the most popular messaging platforms. With BotSailor, the process is simple and customizable from setting your brand colors and welcome messages to choosing widget placement and size. This guide walks you through creating, configuring, and embedding the Telegram Chat Widget, so you can start building stronger, faster communication with your audience.
Why Should You Consider Having a Telegram Chat Widget?
Fast & Secure: Engage users via Telegram’s trusted platform.
Pre-Fill Messages: Accelerate customer interactions.
Custom Design: Align with your brand’s look.
Flexible Integration: Embed via code, QR, or short link.
Log into your BotSailor account.
Go to Telegram > Bot Manager from the sidebar menu.
Choose your desired Telegram account from the provided list.
Click on Chat Widget.
Then, select the Create button at the top-right corner.
In the Configure Action Button panel:
Select t.me short link from the dropdown menu under Actions.
Upload a chatbot logo (supports PNG and JPG formats).
Define your Chatbox header background and text colors.
Enter your preferred Display Name, Welcome Message, and Pre-fill Message.
Specify Chatbox position where you want to display your chat widget (e.g., bottom-right).
Set whether the Chatbox should open automatically on page load. This specifies the visibility behavior of the chatbox.
Adjust offset positions (X, Y) for accurate placement. This determines how many pixels your chatbox will stay away from the edges of the screen.
Customize the button text which will be embedded within opt-in successful message.
Customize the colors (background, text, hover states), and button size for how big the button you want.
Add a mandatory Reference for internal tracking. This reference is unique and will be used to track the plugin later.
Click the Save button to finalize your widget.
To embed the Telegram Chat Widget, click the Embed Code (</>) icon.
Copy the provided JavaScript code and paste it into your website’s HTML. Alternatively, you can use the short-link or QR code provided for direct Telegram access.
After publishing the changes, you will see the telegram chat widgets added to your website.
Your Telegram Chat Widget is now successfully integrated, ready to improve interaction and enhance user engagement on your website.
Frequently Asked Questions (FAQ)
What is the Telegram Chat Widget in BotSailor?
The Telegram Chat Widget allows you to integrate a clickable Telegram chat button or link on your website, helping visitors start conversations with your Telegram bot instantly.
How do I create a Telegram Chat Widget in BotSailor?
Log into your BotSailor account → Navigate to Telegram > Bot Manager → Select your Telegram bot → Click Chat Widget → Then click the Create button at the top-right.
What does the “t.me short link” action do?
This action generates a Telegram short link that opens a chat with your bot. When clicked, it redirects users to the Telegram app or browser-based chat with a pre-filled message (if configured).
What customization options are available for the Telegram widget?
You can personalize:
Logo and header design
Welcome and pre-fill messages
Chatbox and button colors
Widget placement and size
Button hover effects
Auto-launch behavior
What is the purpose of the pre-fill message?
The pre-fill message saves time by auto-filling a default message in the chat input when a user clicks the Telegram widget, helping streamline communication.
Where should I place the Telegram widget code on my site?
Paste the JavaScript code snippet just before the closing </body> tag in your website’s HTML to ensure smooth loading.
Can I use a QR code or short link instead of embedding the widget?
Yes. BotSailor provides both a QR code and a direct short link (t.me) that you can share on any digital or printed media for quick Telegram access.
Is the Telegram Chat Widget mobile responsive?
Yes, it is fully responsive and designed to work well on mobile and desktop devices.
What is the Reference field used for?
The reference name is a required internal label to help you manage and identify widgets within your BotSailor account.
Can I deactivate or edit the Telegram widget later?
Yes, you can return to the widget dashboard to edit design, messaging, or behavior or disable/delete the widget anytime without affecting other bot functions.